<template>
    <div class="dom-update">
        <h2>测试dom更新后</h2>
        <a-button @click="handleToggleForm">{{ showForm ? '隐藏' : '显示' }}表单</a-button>
        <div v-if="showForm" class="class">
            <a-input ref="nameRef" v-model="form.name"></a-input>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, nextTick } from 'vue'
const showForm = ref(false)
const form = ref({ name: '' })
const nameRef = ref(null)
const handleToggleForm = () => {
    showForm.value = !showForm.value
    if (showForm.value) {
        // 此时获取不到 dom
        console.log(nameRef.value);
        // 使用 nextTick 后可以获取 dom 元素
        nextTick(() => {
            console.log(nameRef.value);
        })
    }
}
</script>
<style lang="scss" scoped>
.dom-update {
}
</style>
